<template>
    <div :style="carStyle" @click="gotoUrl(obj)">
        <template v-if="obj.group == 0">
            <div class="line" :style="lineStyle" v-if="!obj.shuxiang"></div>
            <div class="hline" :style="lineStyle" v-else></div>
        </template>
        <template v-else>
            <div class="garden" :style="curveStyle"></div>
        </template>
    </div>
</template>

<script>
// 线条
export default {
    Name: "LineFigure",
    props: {
        obj: Object,
        discount: Number,
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: Function,
    },
    data() {
        return {
            lineStyle: {},
            carStyle: {},
            curveStyle: {}
        }
    },
    mounted() {
        this.setStyle();
    },
    methods: {
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";

            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                whiteSpace: "pre",
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                // fontSize: style.fontSize) + "px",
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
                boxShadow,
                overflow: 'hidden',
                position: 'relative'
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            this.lineStyle = {
                height: this.obj.weight + "px",
                backgroundColor: this.obj.color,
                transformOrigin: "center center",
                transform: `rotate(${this.obj.rotate}deg)`
            }

            if (this.obj.shuxiang) {
                this.lineStyle.height = '100%';
                this.lineStyle.width = this.obj.weight + "px";
            }

            this.curveStyle = {
                transformOrigin: "center center",
                borderColor: this.obj.color,
                borderWidth: this.obj.weight + "px",
                transform: `rotate(${this.obj.rotate}deg)`
            }

            if (this.isEdit == false && this.obj.contactType > 0) {
                this.carStyle.cursor = "pointer";
            }
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                this.setStyle();
            }
        }
    },
}
</script>

<style scoped>
.line {
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -1px;
}

.hline {
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -1px;
}

.garden {
    position: absolute;
    width: 100%;
    height: 300%;
    border-radius: 50%;
    border-style: solid;
    margin-top: 100%;
}
</style>